<template>
  <div class=''>
    <!-- 橡皮筋效果 -->
    <div
      ref="nav"
      class="nav"
    >
      <ul
        ref="list"
        class="list"
      >
        <li class="active">
          <a href="javascript:;">首页</a>
        </li>
        <li>
          <a href="javascript:;">MV</a>
        </li>
        <li>
          <a href="javascript:;">悦单</a>
        </li>
        <li>
          <a href="javascript:;">V榜</a>
        </li>
        <li>
          <a href="javascript:;">音乐</a>
        </li>
        <li>
          <a href="javascript:;">商城</a>
        </li>
        <li>
          <a href="javascript:;">节目</a>
        </li>
        <li>
          <a href="javascript:;">饭团</a>
        </li>
        <li>
          <a href="javascript:;">咨询</a>
        </li>
        <li>
          <a href="javascript:;">我的家</a>
        </li>
        <li>
          <a href="javascript:;">APP下载</a>
        </li>
        <li>
          <a href="javascript:;">热门应用</a>
        </li>
        <li>
          <a href="javascript:;">热门应用</a>
        </li>
        <li>
          <a href="javascript:;">热门应用</a>
        </li>
        <li>
          <a href="javascript:;">热门应用</a>
        </li>
        <li>
          <a href="javascript:;">热门应用</a>
        </li>
        <li>
          <a href="javascript:;">热门应用</a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import damu from '@/utils/damu.js'

export default {
  components: {},
  data () {
    return {

    }
  },
  methods: {
    drag () {
      // 滑屏区域
      let wrap = this.$refs.nav
      // 滑屏元素
      let item = this.$refs.list
      damu.dragNav(wrap, item)
    }
  },
  mounted () {
    this.drag()
  }
}
</script>
<style lang='less' scoped>
.nav {
  overflow: hidden;
  .list {
    white-space: nowrap;
    float: left;
    li {
      height: 129px;
      line-height: 129px;
      padding: 0 38px;
      display: inline-block;
      a {
        color: #020202;
      }
    }
  }
}
</style>
